<template>
    <div>
        <div class="flex-draggalbe-handle">
            <div class="flex-draggalbe-handle-top" v-if="num.length > 1" :data-i-index="dataIIndex"
                 @mousedown="choosLayouts(dataIIndex,$event)"></div>
        </div>
        <div style="display: flex;">
            <draggable :key="item.id" v-for="item in num" :style="item.iStyle" group="layouts" :list="item.itemList"
                       class="item">
                <component v-for="(item2,index) in item.itemList " :key="index" :is="item2.componentName"
                           :style="item2.iStyle" v-bind="item2">
                </component>
            </draggable>
        </div>
    </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import {mapState} from 'vuex'

  export default {
    name: 'IFlex',
    data() {
      return {
        // nodeList: []
      }
    },
    components: {
      draggable,
    },
    computed: {
      ...mapState(['showFlexDraggalbeHandle', 'preview'])
    },
    props: {
      dataIIndex: {
        type: String,
        default: '0'
      },
      num: {
        type: Array,
        default: () => []
      },
      iStyle: {
        type: Object,
        default: () => {
        }
      },
      iClass: {
        type: Array,
        default: () => []
      },
    },
    watch: {
      iStyle: function (val) {
        // console.log('style', val.iStyle);
      }
    }
  };
</script>

<style lang="stylus" scoped>
    .item {
        display: flex
        height: 20px
        flex: 1
        border: 1px solid red
    }

    .sortable-fallback {
    }

    .one-flex {
        width: 100%;
    }

    .i-flex {
        min-height: 20px;

        &-border {
            border-left: #675e6f solid 0.5px;
            border-bottom: #675e6f solid 0.5px;
        }

        &-border-r {
            border-left: #675e6f solid 0.5px;
            border-right: #675e6f solid 0.5px;
            border-bottom: #675e6f solid 0.5px;
        }
    }

    .flex-draggalbe-handle {
        $handleHeight = 8px;

        cursor: pointer;
        background-color: #675e6f;
        width: 100%;

        &-top {
            height: $handleHeight;
            width: 100%;
        }

        &-top:hover {
            background-color: #ad9eba;
        }

        &-bottom {
            height: $handleHeight;
            display: flex;
            width: 100%;

            &-item {
                border-left: #ead2f7 solid 0.5px;
                border-right: #ead2f7 solid 0.5px;
                border-top: #ead2f7 solid 0.5px;
                background-color: #897c94;

                &-single {
                    border-left: #ead2f7 solid 0.5px;
                    border-right: #ead2f7 solid 0.5px;
                    border-top: #ead2f7 solid 0.5px;
                    // background-color: #0f0;
                    background-color: #515894;
                }

                &-single:hover {
                    background-color: #ad9eba;
                }
            }

            &-item:hover {
                background-color: #ad9eba;
            }
        }
    }

    .sortable-fallback {
        display: none;
    }

</style>
